@memberVipBgColor: #ffca92;
@memberVipTextColor: #8B5F20;

.pb-page-member-vip {
    background-color: @memberVipBgColor;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    padding: 1rem;
    margin-top: 4rem;
    position: relative;

    .vip-button {
        background: linear-gradient(152.86deg, #03010a 12.8%, #010007 86.46%);
        color: @memberVipBgColor;
        display: inline-block;
        line-height: 1rem;
        padding: 0.1rem 0.5rem;
        border-radius: 1rem;
        font-weight: bold;
        border: none;
        cursor: pointer;

        &:hover {
            background: linear-gradient(152.86deg, #010007 86.46%, #03010a 86.46%);
        }

        &.lg {
            font-size: var(--font-size-large);
            padding: 0.5rem 1rem;
        }
    }

    .vip-text {
        color: @memberVipTextColor;
    }

    .vip-bg {
        background: #FFF6EC;
    }

    .top {
        display: flex;
        align-items: center;
        background: @memberVipBgColor;
        height: 4rem;
        position: absolute;
        left: 0;
        top: -3rem;
        border-radius: 0.5rem 0.5rem 0 0;
        padding: 0 1rem;

        .member-info {
            color: @memberVipTextColor;


        }
    }

    .body {
        background: #FFF;
        border-radius: 0.5rem;

        .pb-member-vip {
            padding: 1rem;

            .vip-list-container-box {
                position: relative;

                .vip-list-container {
                    overflow-x: auto;


                    .nav {
                        background: #fff;
                        display: block;
                        position: absolute;
                        top: 50%;
                        width: 2rem;
                        height: 2rem;
                        line-height: 2rem;
                        color: var(--color-tertiary);
                        border-radius: 50%;
                        text-align: center;
                        font-size: 1rem;
                        box-shadow: 0 0 0.5rem #ccc;
                        margin-top: -1rem;

                        i {
                            display: block;
                            line-height: 2rem;
                            text-align: center;
                        }

                        &.left {
                            left: 0.2rem;
                        }

                        &.right {
                            right: 0.2rem;
                        }
                    }

                    .vip-list {
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        min-width: min-content;
                        padding: 1rem;

                        .item {
                            text-align: center;
                            flex-grow: 1;
                            border: 1px solid #ffca92;
                            border-radius: 0.5rem;
                            margin: 0.5rem;
                            padding: 1rem;
                            cursor: pointer;
                            color: #381D00;
                            width: 12rem;
                            max-width: 12rem;
                            flex-shrink: 0;

                            &.active {
                                background-color: @memberVipBgColor;
                            }

                        }
                    }
                }
            }
        }

    }
}

@media (max-width: 40rem) {
    .pb-page-member-vip {
        margin-top: 3.2rem;
        padding: 1rem 0.2rem 0.2rem 0.2rem;

        .top {
            right: 0;
        }
    }
}

